<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span>{{title}}</span>
        </div>
        <div class="rain-item-content">
            <div tabindex="1" class="rain-target rain-select" @click="dropStatus = !dropStatus">
                <span :class="{'placeholder':content==null}">{{ content || placeholder }}</span>
                <i class="rain-iconfont">&#xe629;</i>
                <div style="z-index: 1000;" class="rain-drop" v-show="dropStatus">
                    <div @click="select(option,index)" :class="{'selected':selectedIndex==index}"
                     v-for="option,index in options" :key="index" class="rain-option">{{option}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="rain-input">
//维护一下下拉框的状态
let props=defineProps(["placeholder","title","value","options"])
let emit=defineEmits(["sendSelect"])
let dropStatus = ref(false)
const {value,options}=markRaw(props)
let content=ref(options[value])//判断是否有内容
let selectedIndex=ref(value||-1)//选择的index

function select(option:string,index:number){
    content.value=option 
    selectedIndex.value=index
    
    //将更新的消息发送给服务端
    emit("sendSelect",selectedIndex.value)
}

</script>

<style scoped>
@import url("./css/formitems.css");

.rain-drop{
    animation: slide 0.5s;
}
.rain-drop .rain-option.selected{
    color: RGB(31, 182, 180);
}

.rain-item-content span.placeholder{
     color:RGB(159,163,175);
     font-size: 16px;
     font-weight: 400;
}
@keyframes slide {
    to{
        opacity: 1;
    }
    from{
        opacity: 0;
    }
}
</style>